<script>
export default {
  name: 'ex-table',
  props: {
    tableConfig: {
      type: Object,
      default () {
        return {
          data: [],
          columns: []
        }
      }
    },
    page: {
      type: Object,
      default: () => {
        return {
          pageNum: 1, // 当前页
          pageSize: 10 // 当前显示页数
        }
      }
    }
  },
  methods: {
    // 渲染表头以及表格内容，其中item中有render，则为自己渲染scoped。
    renderColumn (h, columns) {
      const parent = this.$parent
      return columns.map((item) => {
        let scoped = null
        if (!item.render) {
          scoped = {
            default: (data) => {
              return (
                <div class="tab-item">
                  <span>{data.row[item.prop]}</span>
                </div>
              )
            }
          }
        } else {
          scoped = item.render(h, item, parent)
        }
        return (
          <c-table-column
            label={item.label}
            prop={item.prop}
            width={item.width}
            min-width={item.min}
            show-overflow-tooltip={item.showTooltip || false}
            align={item.align}
            scopedSlots={scoped}
          ></c-table-column>
        )
      })
    },
    // 渲染操作按钮中的text，可为固定或者函数动态生成
    renderBtn (h, btns, data) {
      return btns.map((item) => {
        let text = ''
        if (item.render) {
          text = item.render(data.row, item)
        } else {
          text = item.text
        }
        let hide = false
        if (item.hide && typeof item.hide === 'function') {
          hide = item.hide && item.hide(data.row)
        } else {
          hide = false
        }
        if (hide) {
          return ''
        }
        if (item.render) {
          return text
        } else {
          return (
            <c-button
              type="text"
              onClick={
                item.methods && item.methods.bind(this.$parent, data.row)
              }
            >
              {text}
            </c-button>
          )
        }
      })
    },
    // 处理渲染按钮数组生成scoped
    rederBtns (h, btns) {
      if (!btns || btns.length === 0) {
        return
      }
      const scoped = {
        default: (sss) => {
          return (
            <div class="table-btn-wrap">{this.renderBtn(h, btns, sss)}</div>
          )
        }
      }
      return (
        <c-table-column
          fixed="right"
          label="操作"
          align="left"
          width={this.tableConfig.btnsWidth}
          scopedSlots={scoped}
        ></c-table-column>
      )
    },
    renderCheck (h, params) {
      if (params) {
        return (
          <c-table-column
            type="selection"
            fixed="left"
            reserve-selection={true}
          ></c-table-column>
        )
      }
    },
    // 渲染表格序号列
    renderIndex (h, isUse) {
      if (isUse) {
        return (
          <c-table-column
            label="序号"
            type="index"
            width="60px"
            index={this.indexMethod}
            header-align="left"
            align="left"
          ></c-table-column>
        )
      }
    },
    indexMethod (index) {
      const { pageNum, pageSize } = this.page
      return (pageNum - 1) * pageSize + index + 1
    },
    selectChange (params) {
      if (typeof this.tableConfig.selectChange !== 'function') {
        throw new Error('table selectChange is function')
      }
      this.tableConfig.selectChange.call(this.$parent, params)
    }
  },
  render (h) {
    return (
      <div class="ex-table-component">
        <c-table
          border
          data={this.tableConfig.data}
          row-key="id"
          on-selection-change={this.selectChange.bind(this)}
        >
          {this.renderIndex(h, this.tableConfig.index)}
          {this.renderCheck(h, this.tableConfig.check)}
          {this.renderColumn(h, this.tableConfig.columns)}
          {this.rederBtns(h, this.tableConfig.btns)}
        </c-table>
      </div>
    )
  }
}
</script>
<style lang='scss' scoped>
.ex-table-component {
  width: 100%;
  .tab-item {
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: none;
    word-break: break-all;
    span {
      display: inline;
    }
  }
}
.table-btn-wrap {
  text-align: left;
}
</style>
